<template>
    <a-sub-menu :key="item.key" v-if="item.children && item.children.length > 0">
        <template #icon>
            <component :is="item.icon" />
        </template>
        <template #title> {{ item.name }}</template>
        <div v-for="child in item.children" :key="child.key">
            <menu-item v-if="child.children && child.children.length > 0" :item="child" />
            <a-menu-item :key="child.key" v-else-if="!child.activeMenu">
                {{ child.name }}
                <template #icon>
                    <component :is="child.icon" />
                </template>
            </a-menu-item>
        </div>
    </a-sub-menu>
    <a-menu-item :key="item.key" v-else-if="!item.activeMenu">
        {{ item.name }}
        <template #icon>
            <component :is="item.icon" />
        </template>
    </a-menu-item>
</template>
<script setup>
import { onMounted } from 'vue';

const props = defineProps({
    item: {
        required: true,
        type: Object
    }
})
onMounted(() => {
    console.log(props)
})
</script>
<style lang="less">
.arco-menu-inline,
.arco-menu-item,
.arco-menu-dark .arco-menu-inline-header,
.arco-menu-light .arco-menu-inline-header,
.arco-menu-pop .arco-menu-pop-header,
.arco-menu-dark .arco-menu-inline-header .arco-menu-selected {
    background-color: transparent !important;
}

.arco-menu-light .arco-menu-inline-header .arco-icon,
.arco-menu-item.arco-menu-has-icon .arco-menu-title,
.arco-menu-inline-header.arco-menu-has-icon .arco-menu-title {
    color: #ffffff;
}

.arco-menu-item.arco-menu-selected.arco-menu-has-icon .arco-menu-title,
.arco-menu-inline-header.arco-menu-selected.arco-menu-has-icon .arco-menu-title {
    color: rgb(var(--primary-6));
}
</style>